import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import 'antd/dist/antd.css';
import './App.css';
import { Layout } from 'antd';
import AppHeader from './components/Header/';
import ContainerDetail from './containers/Detail'
import ContainerList from './containers/List'
const { Header, Footer, Content } = Layout;

function App() {
  return (
    <div>
      <BrowserRouter>
        <Layout style={{ minWidth: '1200px', margin: '0 auto' }}>
          <Header className="header">
            <AppHeader />
          </Header>
          <Content className="content">
            <Switch>
              <Route path="/detail" component={ContainerDetail} />
              <Route path="/:id?" component={ContainerList} />
            </Switch>
          </Content>
          <Footer className="footer">Footer</Footer>
        </Layout>
      </BrowserRouter>
    </div>
  );
}

export default App;
